import { useCallback, useState, DragEvent } from "react";
import { IfTruthy } from "../Condition";
import "./index.scss";

interface IDragReceiverProps {
    // 位置：顶部/底部
    position: "top" | "bottom";
    // 当前响应器的下标
    rowIndex: number;
    // 释放事件
    onDrop?: (from: number, to: number) => void;
    /** 用来匹配拖拽源的tag */
    tag?: string;
    /** 是否需要td标签包裹 */
    insideTable?: boolean;
}

export default function DragReceiver(props: IDragReceiverProps) {
    const { position, rowIndex, onDrop, tag, insideTable } = props;
    const [draggingOver, setDraggingOver] = useState(false);

    const onDragOver = useCallback(() => {
        setDraggingOver(true);
    }, []);

    const onDragLeave = useCallback(() => {
        setDraggingOver(false);
    }, []);

    const contentComponent = (
        <div
            className={`components--drag-receiver components--drag-receiver-${[
                position,
            ]}`}
            onDragOver={onDragOver}
            onDragLeave={onDragLeave}
            onDrop={(e) => {
                const itemIndex = +e.dataTransfer.getData("itemIndex");
                const itemTag = e.dataTransfer.getData("itemTag");
                setDraggingOver(false);

                const _itemTag = (itemTag === "null" || itemTag === "undefined") ? null : `${itemTag}`;
                const _tag = tag ? `${tag}` : null;
                if (_itemTag !== _tag) {
                    // tag 不一致 忽略
                    return;
                }
                if (itemIndex >= 0) {
                    onDrop?.(itemIndex, rowIndex);
                }
            }}
        >
            <IfTruthy condition={draggingOver}>
                <div className="components--drag-receiver-content"></div>
            </IfTruthy>
        </div>
    );

    return insideTable ? (
        <td className="components--drag-receiver-table-container">{contentComponent}</td>
    ) : (
        contentComponent
    );
}

export function startDrag(
    e: DragEvent,
    itemIndex: number | string,
    tag?: string,
) {
    e.dataTransfer.setData("itemIndex", `${itemIndex}`);
    e.dataTransfer.setData("itemTag", tag ?? null);
}
